<script setup lang="ts">
import router from "@/router";
import {getConsultAnt} from "@/api/home/index";
import {ref} from "vue";

let recordingArr = ref([])
getConsultAnt().then(res => {
    console.log(res)
    if (res.code == 200) {
        recordingArr.value = res.rows
    }
})


let url = 'http://192.168.5.120:8090'

</script>

<template>
  <!--咨询信息-->
    <div class="box">
        <div class="substance" style="min-height: 66vh;">
            <div class="titTime" @click="router.go(-1)">
                <van-icon name="arrow-left"/>
                <span class="titleText">我的咨询</span>
            </div>
            <div class="classify" v-for="item in recordingArr"
                 @click="router.push({path: '/consultationXq',query:{'id': item.id}})" :key="item.id">
                <div class="detailBox">
                    <div class="detailTitle">
                        <div class="teacher">
                            <div class="imgBox">
                                <img :src="url + item.avatar" alt="" class="imgT">
                            </div>
                            <div class="nameText">
                                <div class="nameT">
                                    <span class="name">{{ item.name }}</span>
                                </div>
                                <div class="introduce">
                                    {{ item.createTime }}
                                </div>
                            </div>
                        </div>
                        <div class="state">
                            {{ item.status == '0' ? '未开始' : item.status == '1' ? '进行中' : '已结束' }}
                        </div>
                    </div>
                    <div class="tiemBox">
                        <div class="method">
                            <div class="imgBox">
                                <img src="@/assets/images/对话咨询.png" alt="" class="imgZ">
                            </div>
                            线下咨询
                        </div>
                        <div class="place">
                            地点：办公楼315办公室
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    min-height: 210vw
}

.titTime {
    margin-bottom: 5%;
    font-size: 5vw;
}

.substance {
    position: relative;
    margin: -8% auto;
    padding: 8% 6%;
    width: 95%;
    background-color: #fafafa;
    border-radius: 15px;

    .titTime {
        margin-bottom: 5%;
        font-size: 5vw;
    }
}

.detailBox {
    padding: 6% 0 0 5%;
    width: 100%;
    height: 100%;
    min-height: 35vw;
    background-color: #fff;
    border-radius: 15px;

    .detailTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .state {
        padding-top: 1.5%;
        width: 25%;
        min-height: 6vw;
        text-align: center;
        font-size: 90%;
        color: #fff;
        background-color: #419CFD;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
    }

    .tiemBox {
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3% 0 0;

        .method {
            display: flex;
            align-items: center;

            .imgBox {
                margin-right: 6%;
                width: 25%;
                height: 25%;

                .imgZ {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .teacher {
        display: flex;
        margin-top: 5%;
        width: 100%;
        height: 100%;

        .imgBox {
            width: 15%;
            height: 15%;

            .imgT {
                width: 90%;
                height: 90%;
                border-radius: 5px;
            }
        }

        .nameText {
            margin-left: 2%;
            color: black;
            font-size: 4vw;
        }
    }
}

.demo-tabs > .el-tabs__content {
    padding: 10%;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

>>> .el-tabs__content {
    padding: 0 3%;
}
</style>